import React from 'react'
import { Input, Tag, message, Icon } from 'antd'
const { CheckableTag } = Tag


export default class Items extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      visible: true,
      checked: true,
    }
  }

  render() {
    const handleTagOnClick = () => {
      this.setState({
        checked: false
      })
    }

    const handleOnPressEnter = (e) => {
      if (!e.target.value) {
        message.error("亲，输入之后再回车~")
        return
      }
      let data = {
        id: this.props.id
      }
      if (this.props.name) { data.name = e.target.value }
      if (this.props.word) { data.word = e.target.value }
      this.props.updateItems(data).then(() => {
        this.setState({
          checked: true
        })
      })
    }

    const handleDelete = (e) => {
      e.stopPropagation()
      this.props.deleteItem(this.props.id, this.props.parentId)   //parentId 数据字典明细删除时用
    }

    return (
      <div style={{ display: "inline-block", width: "80" }}>
        {!this.state.checked ?
          <Input onPressEnter={handleOnPressEnter} onBlur={handleOnPressEnter} defaultValue={this.props.name || this.props.word} size="small" style={{ width: "auto", marginBottom: 10 }} />
          :
          (<div>
            <CheckableTag closable={true} checked={this.state.checked} color="#108ee9" style={{ marginBottom: 10 }} onChange={handleTagOnClick}>{this.props.name || this.props.word}<Icon type="close" onClick={handleDelete} /></CheckableTag>
          </div>
          )}
      </div>
    )
  }
}
